// 数据审核列表
import React, { useEffect, useState } from 'react';
import Header from '../header/Header';
import memo from '../common/wrapMemo';
import { connect } from 'react-redux';
import { Button, Input, Select, Table, Space } from 'antd';
import style from './DataAudit.module.scss';
import api from '../../api';
import AuditDetail from './AuditDetail';
import { formatTime } from '../../util/util';
// import { Scrollbars } from 'react-custom-scrollbars';

const { Option } = Select;

const statusTag = {
    "0": { color: '00e9ff', text: '待审核' },
    "1": { color: '#00f794', text: '已通过' },
    "2": { color: '#ff0000', text: '未通过' },
};

const DataAudit = memo((props) => {
    const {layerFields} = props;
    const fields = layerFields.toJS();

    const [keyword, setKeyword] = useState('');
    const [inputValue, setInputValue] = useState('');
    const [status, setStatus] = useState('');
    const [data, setData] = useState([]);
    const [page, setPage] = useState({ current: 1, pageSize: 10 });
    const [total, setTotal] = useState(0);
    const [showModal, setShowModal] = useState(false);
    const [modalData, setModalData] = useState();
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        search();
    }, [inputValue, status, page]);

    const columns = [
        {
            title: '序号',
            // dataIndex: 'operation_id',
            render(text, record, index) {
                return `${(page.current - 1) * (page.pageSize) + (index + 1)}`  
            },
            ellipsis: true,
            align: 'center',
        },
        {
            title: '操作时间',
            dataIndex: 'operationTime',
            ellipsis: true,
            align: 'center',
            render(_, record) {
                return <span>{formatTime(record.operationTime)}</span>;
            }
        },
        {
            title: '操作图层',
            dataIndex: 'operationLayer',
            ellipsis: true,
            align: 'center',
        },

        {
            title: '审核状态',
            dataIndex: 'checkState',
            align: 'center',
            render(_, record) {
                const color = statusTag[record.checkState].color;
                return <span style={{ color: color }}>{statusTag[record.checkState].text}</span>;
            },
        },
        {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            className: style.option,
            render(_, record) {
                return (
                    <Space size="middle">
                        <Button className={style.passBtn} onClick={() => onOptionClick(record)}>
                            审核
                        </Button>
                    </Space>
                );
            },
        },
    ];

    // 操作栏点击事件
    const onOptionClick = (record) => {
        console.log('123456', record);
        setShowModal(true);
        setModalData(record);
    };

    // 获取审核列表
    const search = () => {
        const {current, pageSize} = page;
        let params = {
            page: current,
            size: pageSize,
            checkState: status,
            operationLayer: inputValue
        };
        setLoading(true);

        api.layer.getAuditList(params)
            .then(res => {
                const {code ,data} = res.data;
                if(code === 200){
                    console.log(data);
                    const {count, result} = data;
                    setData(result);
                    setTotal(count);
                }
            }).catch(err => {
                console.log(err);
            }).finally(() => {
                setLoading(false);
            });
    };

    // const search = () => {
    //     setLoading(true);
    //     const params = { page: page.current, size: page.pageSize };
    //     if (keyword) {
    //         params.layerName = keyword;
    //     }
    //     if (status) {
    //         params.state = status;
    //     }
    //     api.layer
    //         .getAuditList(params)
    //         .then((res = {}) => {
    //             const { feature, total } = res.data;

    //             setData(feature);
    //             setTotal(total);
    //         })
    //         .finally(() => {
    //             setLoading(false);
    //         });
    // };
    const tableParamsChange = (pagination) => {
        setPage(pagination);
    };
    const onCloseModal = () => {
        setShowModal(false);
        setModalData(null);
    };

    const onReset = () => {
        setKeyword('');
        setInputValue('');
        setStatus('');
    };

    const onRefresh = () => {
        setShowModal(false);
        setModalData(null);
        search();
    };

    // const components = {
    //     table(props) {
    //         const { className } = props;
    //         return (
    //             <Scrollbars autoHeight autoHeightMin={220} autoHeightMax={`calc(100vh - 200px)`}>
    //                 <table className={className}>{props.children}</table>
    //             </Scrollbars>
    //         );
    //     },
    // };

    return (
        <>
            <div className={style.dataAudit}>
                <Header />
                <div className={style.header}>
                    <span className={style.title}>数据审核</span>

                    <Input
                        placeholder="请输入图层名称"
                        value={keyword}
                        onChange={(e) => {
                            setKeyword(e.target.value);
                        }}
                        onPressEnter={(e) => {
                            setInputValue(e.target.value);
                        }}
                        className={style.keywordInput}
                    />
                    <span>状态：</span>
                    <Select
                        value={status}
                        onSelect={(value) => {
                            setStatus(value);
                        }}
                        className={style.statusSelect}
                        dropdownClassName={style.statusSelectDrop}
                    >
                        <Option value={''}>全部</Option>
                        <Option value={'0'}>待审核</Option>
                        <Option value={'1'}>审核通过</Option>
                        <Option value={'2'}>审核不通过</Option>
                    </Select>
                    <Button className={style.resetBtn} onClick={onReset}>
                        重置
                    </Button>
                </div>
                <div className={style.tableWrap}>
                    <Table
                        loading={loading}
                        className={style.table}
                        columns={columns}
                        rowKey={(record) => record.operation_id}
                        pagination={{
                            pageSize: page.pageSize,
                            showSizeChanger: true,
                            total: total,
                            showTotal: (total) => `共${total}条`,
                        }}
                        dataSource={data}
                        onChange={tableParamsChange}
                        rowClassName={style.tableRow}
                        scroll={{ y: 'calc(100vh - 250px)', x: 'max-content' }}
                    />
                </div>
            </div>
            {showModal && (
                <AuditDetail data={modalData} fields={fields} onClose={onCloseModal} onRefresh={onRefresh} />
            )}
        </>
    );
});

DataAudit.displayName = 'DataAudit';

function mapStateToProps(state) {
    return {
        layerFields: state.getIn(['layer','layerFields'])
    };
}

export default connect(mapStateToProps)(DataAudit);
